<template>
  <div class="container" v-bind:style="{height: windowHeight + 'px' }" v-if="brandlist.length > 0">
    <div class="product_list flex">
      <div class="leftpart">
        <scroll-view scroll-y :style="{height: windowHeight - 50 + 'px' }">
          <span class="goods" :class="brandid === item.brandid ? 'cur' : ''" v-for="item in brandlist" :key="item.brandid" @tap="showdetails(item.brandid)">{{item.brandname}}</span>
        </scroll-view>
      </div>
      <div class="rightpart flex-item">
        <scroll-view scroll-y :style="{height: windowHeight + 'px' }">
          <!-- <span class="goods_details" v-for="item in goodslist" :key="item.goodsid">
            <i>{{item.goodsname}}</i> <i>￥{{item.price}}</i>
            <checkbox @change="checkboxChange" />
          </span> -->
          <checkbox-group @change="checkboxChange">
            <label class="checkbox" v-for="item in goodslist" :key="item.goodsid">
              <i>{{item.goodsname}}</i> <i>￥{{item.price}}</i>
              <input type="checkbox" :value="item.goodsid">
            </label>
          </checkbox-group>
        </scroll-view>
      </div>
    </div>
    <van-submit-bar :price="listnum" label="已选择数量:" button-text="提交" currency=" " @submit="onSubmit" />
  </div>
  <div class="container" v-else>
    <Empty message="暂无产品"></Empty>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      windowHeight: 0,
      checked: [],
      brandlist: '',
      goodslist: [],
      goodslistInfo: [],
      brandid: 49,
      listnum: 0,
      goodsinfo: []
    }
  },

  components: {
    Empty
  },
  onShow () {
    this.getshopgoodslist()
  },
  methods: {
    async showdetails (brandid) {
      this.brandid = brandid;
      if (this.goodslistInfo) {
        let goodslist = []
        for (let i = 0; i < this.goodslistInfo.length; i++) {
          if (this.goodslistInfo[i].brandid === brandid) {
            goodslist.push(this.goodslistInfo[i])
          }
        }
        this.goodslist = goodslist;
      } else {
        Toast('接口错误！');
      }
    },
    async getshopgoodslist () {
      let userid = wx.getStorageSync('userInfo').user_id;
      const ret = await api.getshopsubjectlist({ user_id: userid });
      if (ret) {
        let goodslist = []
        let brandlist = [];
        let brandid = [];
        this.goodslistInfo = ret.data;
        this.brandid = ret.data[0].brandid;
        for (let i = 0; i < ret.data.length; i++) {
          let res = this.contains(brandid, ret.data[i].brandid);
          if (res) {
          } else {
            brandlist.push({ 'brandid': ret.data[i].brandid, 'brandname': ret.data[i].brandname });
            brandid.push(ret.data[i].brandid);
          }
          if (ret.data[i].brandid === this.brandid) {
            ret.data[i].checked = false;
            goodslist.push(ret.data[i])
          }
        }
        this.brandlist = brandlist;
        this.goodslist = goodslist;
      } else {
        Toast('接口错误！');
      }
    },
    checkboxChange (e) {
      // console.log(e.mp)
      // let checked = e.mp.detail.value;
      // let chooseGoodslist = [];
      // checked.forEach(item => {
      //   this.goodslist.forEach(i => {
      //     if (Number(item) === Number(i.goodsid)) {
      //       chooseGoodslist.push(i);
      //     }
      //   })
      // })
      // wx.setStorageSync('chooseProjectlist', chooseGoodslist);
      let checked = e.mp.detail.value;
      this.checked = checked;
      console.log(this.checked)
      this.listnum = parseInt(this.checked.length * 100);
    },
    onSubmit () {
      if (this.checked.length > 0) {
        this.checked.forEach(item => {
          this.goodslist.forEach(i => {
            if (Number(item) === Number(i.goodsid)) {
              i.num = 1;
              this.goodsinfo.push(i);
            }
          })
        })
      }
      wx.setStorageSync('chooseProjectlist', this.goodsinfo);
      if (this.goodsinfo.length > 0) {
        wx.setStorageSync('plan', 'add')
        wx.redirectTo({
          url: '/pages/guest/personalmonthplan/personalmonthplan'
        })
      }
    },
    // 判断是否在数组里
    contains (arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return true;
        }
      }
      return false;
    }
  },
  created () {
    let that = this
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    wx.getSystemInfo({
      success (res) {
        that.windowHeight = res.windowHeight
      }
    })
  },
  onReady () {
  }
}
</script>

<style scoped>
.container {
  background: RGBA(153, 153, 153, 0.1) !important;
}
.product_list {
  width: 100%;
  height: 100%;
}
.product_list .leftpart {
  width: 176rpx;
  height: 100%;
  background: rgba(245, 245, 245, 1);
}
.product_list .leftpart .goods {
  display: block;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 84rpx;
  color: rgba(102, 102, 102, 1);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product_list .leftpart .goods.cur {
  position: relative;
  background: #fff;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.product_list .leftpart .goods.cur::after {
  content: '';
  position: absolute;
  width: 8rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.product_list .rightpart {
  width: 574rpx;
  height: 100%;
  background: #fff;
  padding: 24rpx 46rpx;
  box-sizing: border-box;
}
.product_list .rightpart label {
  display: block;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 32rpx;
  position: relative;
}
i {
  display: inline;
}
checkbox {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
<style>
/*checkbox 整体大小  */
checkbox {
  position: absolute;
  top: 0;
  right: 0;
}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #ff4444;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
</style>
